Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button title="Settings" class="rightPlayerBtn"></button>

<div class="menuArea closed">
	<button id="open" title="How the game is played">How to Play</button>
	<dialog>
		<h3 class="header">How to Play</h3>
		<button type="button" class="closeDialog" title="Close">x</button>
		<div class="gameInfo">Just figure it out... Duh 🙄
			<br />
			<br />
			No, but for real, 2 bots enter. 1 bot leaves victorious, shrouded in glory and riches.
			<br />
			<br />
			<hr />
			<h3>Moves</h3>
			Each bot will have a Brain class that can be given logic to make a decision every time the game updates.
			<br />
			<small>(The default update rate is 100ms.)</small>
			<br />
			<br />
			The possible decisions a bot can make each update are
			<ul>
				<li><b>"left"</b></li>
				<li><b>"right"</b></li>
				<li><b>"up"</b></li>
				<li><b>"down"</b></li>
				<li><b>"shoot"</b></li>
			</ul>
			<br />
			<hr />
			<h3>Powers</h3>
			Additionally, your created brain will have <i>5</i> possible points to assign to the bot. They will be split between
			<ul>
				<li><svg viewBox="0 0 24 24" width="16" height="16" stroke="green" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
						<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
					</svg> Armor</li>
				<li><svg viewBox="0 0 24 24" width="16" height="16" stroke="steelblue" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
						<circle cx="12" cy="12" r="2"></circle>
						<path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"></path>
					</svg> Scan Distance</li>
				<li><svg viewBox="0 0 24 24" width="16" height="16" stroke="firebrick" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
						<circle cx="12" cy="12" r="10"></circle>
						<circle cx="12" cy="12" r="6"></circle>
						<circle cx="12" cy="12" r="2"></circle>
					</svg> Bullet Power</li>
			</ul>
			You can give any number of points (up to 5) to each power, but you only have 5 points to give.
			<br />
			<small>**note**: If you go over 5 total points...
				<br />
				(ex. {armor: 3, scanDistance:2, bulletPower:2})
				<br />
				the fighting arena will set all 3 of your bot's powers to <i>0</i>.</small>
			<br />
			<br />
			<hr />
			<h3>Location</h3>
			In addition to having powers to balance, your bot will have access to the 2 following bot functions:
			<ul>
				<li>
					<b>this.scan()</b>
					<br />
					<small>will either return:
						<ol>
							<li>an object with the enemy's x and y (if an enemy is within the scanRadius)</li>
							<li>an empty object (if no enemy within the radius)</li>
						</ol>
					</small>
				</li>
				<li>
					<b>this.whereAmI()</b>
					<br />
					<small>will return your x and y in an object (ex: {x: 25, y: 61})</small>
				</li>
			</ul>
			<br />
			<hr />
			<h3>Logic</h3>
			The logic for your brain will occur within your <b>decide()</b> function.
			<br />
			<small>This is the function that is triggered every 100ms by the bot</small>
			<br />
			Inside of <i>decide()</i> is where you change the values of:
			<ul>
				<li><b>this.decision</b> <small>("shoot", "up", "down", "left", "right")</small></li>
				<li><b>this.shotAngle</b> <small>(between 0 and 360. Default is 0)</small></li>
			</ul>
			<br />
			<hr />
			<h3>Example Brain</h3>
			<pre class="language-javascript">class Brain {
	constructor() {
		this.name = "Nameless Bot";
		this.color = "purple";
		this.armor = 0;
		this.scanDistance = 0;
		this.bulletPower = 0;

// decide() should change these 2
		this.decision = "shoot";
		this.shotAngle = 0;

/* 
		you can add additional 
		variables here if you want
		*/
	}

// the decide call gets made 
	// every time the game updates 
	// (e.g. every 100ms)
	decide() {
		// decision-making logic here 
		// (e.g., move left, shoot, etc.)
		return this.decision;
	}
}</pre>
			<br />
		</div>
	</dialog>
	<br />
	<div class="btnContainer">
		<button id="import">Import Player</button>
		<dialog>
			<h3 class="header">Import Player</h3>
			<button type="button" class="closeDialog" title="Close">x</button>
			<div class="gameInfo">
				<input type="text" id="urlInput" placeholder="Enter URL of JS file">
				<button onclick="addClassFromUrl()">Add Player</button>
				<br />
				<h6>Example import:</h6>
				<span class="playerLink"><small>https://codepen.io/leimapapa/pen/abxoVdV/0d80d0a5415cdf489c17b65f2a542e05.js</small></span>
				<br />
				<br />
				<hr />
				Your imported player should be the only thing that exists in the .js file you will import and should look like the following:
				<br />
				<pre class="language-javascript">export default class MyBrain {
	constructor() {
		this.name = "Big Brain Bot";
		this.color = "purple";
		this.armor = 0;
		this.scanDistance = 0;
		this.bulletPower = 0;

// decide() should change these 2
		this.decision = "shoot";
		this.shotAngle = 0;

/* 
		you can add additional 
		variables here if you want
		*/
	}

// the decide call gets made 
	// every time the game updates 
	// (e.g. every 100ms)
	decide() {
		// decision-making logic here 
		// (e.g., move left, shoot, etc.)
		return this.decision;
	}
}</pre>
				<br />
				Easy way: <a href="https://codepen.io/pen?template=poBzpLZ" target="_blank">Use this template</a>. Then copy the url and add <b>.js</b> to the end and use that.
				<br />
				<br />
				<div class="importedPlayers">
					<h5>Imported Players</h5>
					<hr />
				</div>
			</div>
		</dialog>
		<br />
		<br />
		Game Speed (ms):
		<div class="gameSpeed">
			<input type="range" min="10" max="300" value="100" step="10" class="slider" id="myRange" oninput="changeFrameInterval(this.value)">
			<br />
			<small><span class="gameSpeedMs">100</span> ms</small>
		</div>
		<div>
			<hr />
			<br />
			Bullet Color: <input type="color" id="bulletCol" value="#FF69B4" oninput="changeBulletColor(this.value)">
		</div>
		<br />
		<hr />
		<br />
		<div>
			Shield Color: <input type="color" id="shieldCol" value="#00FFFF" oninput="changeShieldColor(this.value)">
		</div>
		<br />
		<hr />
		<br />
		Log:
		<br />
		<div id="log"><span>Log messages populate here</span></div>
		<br />
	</div>

</div>

<br />
	<button class="endBtn" title="End Game">END</button>
	<button class="startBtn" title="Start Game">START</button>
</div>
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
	background: #222;
}
#arena {
	border: 1px solid rgba(255, 255, 255, 0.2);
	height: auto;
	width: calc(100% - 2px);
	max-width: 500px;
	margin-top: 3em;
}
button {
	cursor: pointer;
	font-family: "Roboto", sans-serif;
}
.container {
	left: 50%;
	position: absolute;
	transform: translate(-50%);
	width: 100vw;
	max-width: 500px;
}
#log {
	height: 80px;
	width: 100%;
	/* 	max-width: 500px; */
	background: #ccc;
	border-radius: 10px;
	font-family: monospace;
	overflow-y: auto;
	border: 2px dashed #666;
	width: calc(100% - 6px);
}

#log > span {
	display: block;
	padding: 5px;
	border: 1px solid #111;
	border-radius: 10px;
	box-sizing: border-box;
	color: #333;
}
.shield, .bandolier {
	transition: stroke-dasharray 200ms;
}
.bot,
.shield,
.scan,
.bandolier {
	transition: 100ms;
}
.startBtn:hover,
.endBtn:hover {
	opacity: 0.7;
}
.startBtn,
.endBtn {
	border-radius: 5px;
	display: inline-block;
	background: none;
	padding: 5px;
	width: 100px;
	font-weight: bold;
	font-size: 1.8em;
	color: #f5f5f5;
	font-family: monospace;
}
.startBtn {
	float: right;
	border: 2px solid forestgreen;
}
.endBtn {
	float: left;
	border: 2px solid firebrick;
}
.matchupContainer {
	position: relative;
	display: inline-block;
	width: 100%;
	margin-bottom: 5px;
}
.versus {
	color: #f5f5f5;
	font-family: monospace;
	position: absolute;
	left: 50%;
	transform: translate(-50%);
	padding-top: 6px;
}
.s1 {
	float: left;
}
.s2 {
	float: right;
}
.selectedFighter {
	cursor: pointer;
	position: relative;
	border: 1px solid #111;
	border-radius: 10px;
	width: 200px;
	max-width: 45%;
	padding: 4px;
	font-weight: bold;
	background: goldenrod;
	color: #fff;
	/* 	font-family: "Roboto", sans-serif; */
	font-family: monospace;
	font-size: 1.3em;
	text-shadow: 0.5px 0px 2px #000;
	padding-left: 8px;
	padding-right: 8px;
}
.selectedFighter > option {
	cursor: pointer;
	text-shadow: 0.5px 0px 2px #000;
}
option {
	text-align: center;
	text-shadow: 0.5px 0px 2px #000;
	cursor: pointer;
}
.templateLoader {
	background-color: rgba(155, 155, 155, 0.8);
	padding: 5px;
	font-size: 80%;
	width: 172px;
	position: relative;
	left: 50%;
	border-radius: 0 0 5px 5px;
	transform: translate(-50%);
}
/* menu stuff */
.menuArea {
	position: fixed;
	top: 0%;
	right: 0%;
	z-index: 999;
	height: 100%;
	width: 200px;
	border-left: 3px solid rgb(50, 50, 50);
	border-right: 3px solid rgb(50, 50, 50);
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	background: rgba(60, 60, 60, 0.8);
	opacity: 1;
	transition: 200ms;
	overflow-y: auto;
	overflow-x: hidden;
	box-shadow: -3px 0px 5px rgba(25, 25, 25, 0.5);
	color: #fff;
	font-family: "Roboto", sans-serif;
}
.btnContainer {
	margin-top: 70px;
	margin-bottom: 20px;
	text-align: center;
}
.btnContainer > button {
	flex: 1;
	width: 100%;
	height: 48px;
	cursor: pointer;
	background: rgb(100, 100, 100);
	color: #fff;
	font-size: 1.05em;
	font-family: monospace;
}

.btnContainer > button:hover {
	opacity: 0.8;
}

.leftPlayerBtn {
	height: 3em;
	width: 3em;
	position: fixed;
	left: 10px;
	top: 10px;
	background: rgba(0, 0, 0, 0.8);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	border: 2px solid rgb(150, 150, 150);
	border-radius: 50%;
	z-index: 9999;
	box-shadow: 2px 0px 3px #000;
	cursor: pointer;
	transition: 100ms;
}
.rightPlayerBtn {
	height: 3em;
	width: 3em;
	position: fixed;
	right: 10px;
	top: 10px;
	background: #000;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='24px' height='24px'%3E%3Cpath d='M 35 38 L 28 43 L 24 38 L 16 42 L 8 39 L 6 31 L 13 31 L 18 24 L 5 24 L 11 16 L 14 20 L 18 11 L 32 5 L 20 18 L 31 12 L 38 5 L 50 5 L 39 12 L 35 22 L 30 18 L 23 23 L 17 35 L 26 32 L 26 28 L 30 24 L 31 34 L 38 31 L 35 27 L 42 23 L 43 33 L 48 31 L 44 17 L 47 13 L 51 25 L 58 20 L 50 10 L 59 9 L 59 15 L 63 12 L 63 18 L 69 17 L 74 26 L 67 21 L 58 25 L 53 34 L 42 38 L 42 42 L 27 48 L 32 51 L 39 48 L 48 46 L 51 41 L 56 42 L 56 37 L 62 35 L 61 29 L 68 29 L 73 32 L 72 39 L 74 45 L 72 55 L 67 52 L 68 46 L 67 36 L 63 40 L 57 47 L 48 53 L 39 53 L 35 57 L 44 59 L 56 54 L 62 48 L 63 56 L 67 57 L 61 60 L 54 59 L 51 64 L 56 64 L 53 69 L 58 71 L 55 76' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	border: 2px solid rgb(150, 150, 150);
	border-radius: 50%;
	z-index: 9999;
	box-shadow: 2px 0px 3px #000;
	cursor: pointer;
	transition: 100ms;
}
.rightPlayerBtn:hover,
.infoBtn:hover {
	opacity: 0.8;
}
.rightPlayerBtn:active,
.infoBtn:active {
	box-shadow: 1px 0px 1px #000;
}
.closed {
	height: 0%;
	overflow: hidden;
}

.closed > * {
	display: none;
}
.customBrain {
	max-width: 180px;
	min-width: 180px;
	width: 180px;
	min-height: 200px;
}

/* modal stuff */
dialog {
	z-index: 1000;
	background: #ccc;
	box-shadow: 0px 3px 8px #000;
	border-radius: 8px;
	border: none;
	padding-top: 35px;
	position: relative;
	font-family: "Roboto", sans-serif;
	min-width: 350px;
	max-width: 500px;
	width: 80%;
	min-height: 500px;
	max-height: 700px;
	height: 80%;
	overflow: hidden;
}
.gameInfo {
	max-height: 100%;
	width: 100%;
	overflow-y: auto;
}
.gameInfo > h3 {
	text-align: center;
}
.closeDialog {
	position: absolute;
	font-size: 2em;
/* 	font-weight: 900; */
	top: 0px;
	right: 0px;
	border: none;
	background: none;
	cursor: pointer;
	height: 30px;
	width: 30px;
	color: #fff;
	font-family: monospace;
}
.closeDialog:hover {
	color: rgba(0, 0, 0, 0.5);
}
.header {
	text-align: center;
	margin-top: -30px;
}
#open {
	margin-top: 12px;
	width: 100px;
	border: 2px solid rgba(0,255,255,0.5);
	background: none;
	color: #0ff;
	padding: 10px;
	font-family: "Roboto", sans-serif;
	border-radius: 20px;
	cursor: pointer;
	position: absolute;
}

/* width */
::-webkit-scrollbar {
	width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 3px grey;
	border-radius: 10px;
}

/* Handle */
.menuArea::-webkit-scrollbar-thumb {
	background: #666;
	border-radius: 10px;
}

/* Handle on hover */
.menuArea::-webkit-scrollbar-thumb:hover {
	background: #888;
}
/* Handle */
.gameInfo::-webkit-scrollbar-thumb {
	background: #666;
	border-radius: 10px;
}

/* Handle on hover */
.gameInfo::-webkit-scrollbar-thumb:hover {
	background: #888;
}
/* Handle */
::-webkit-scrollbar-thumb {
	background: #666;
	border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #888;
}
.playerLink {
	word-wrap: break-word;
}
.newPlayer {
	border: 2px dotted #fff;
	border-radius: 5px;
	padding: 5px;
}

console.log("Event Fired")
const arenaSVG = document.getElementById("arena");

let frameInterval = 100; // Update frame every 100ms
let bulletColor = "#FF69B4";
let shieldColor = "#0FF";
const gameBG = `<filter id="blur">
		<feGaussianBlur stdDeviation="1" />
	</filter>
	<pattern id="rubber" width="20" height="15" patternUnits="userSpaceOnUse" patternTransform="scale(.1 .1)">
		<g filter="url(#blur)" fill="#000">
			<circle cx="9.8" cy="7.3" r="4" />
			<circle cx="19.8" cy="14.8" r="4" />
			<circle cx="-0.2" cy="14.8" r="4" />
			<circle cx="-0.2" cy="-0.2" r="4" />
			<circle cx="19.8" cy="-0.2" r="4" />
		</g>
		<g filter="url(#blur)" fill="#666">
			<circle cx="10.2" cy="7.7" r="4" />
			<circle cx="20.2" cy="15.2" r="4" />
			<circle cx="0.2" cy="15.2" r="4" />
			<circle cx="0.2" cy=".2" r="4" />
			<circle cx="20.2" cy=".2" r="4" />
		</g>
		<g fill="#111">
			<circle cx="20" cy="15" r="4" />
			<circle cx="0" cy="15" r="4" />
			<circle cx="0" cy="0" r="4" />
			<circle cx="10" cy="7.5" r="4" />
			<circle cx="20" cy="0" r="4" />
		</g>
	</pattern>
	<rect width="100%" height="100%" fill="#222" />
	<rect width="100%" height="100%" fill="url(#rubber)" />`;

let isGameRunning = false;

function changeFrameInterval(val) {
	frameInterval = val;
	document.querySelector(".gameSpeedMs").innerText = val;
}

class Arena {
	constructor(width, height) {
		this.width = width;
		this.height = height;
		this.bots = [];
		this.projectiles = [];
	}

// Method to get the bots in the arena
	getBots() {
		return this.bots;
	}
}

// Initialize the game
let arena = new Arena(100, 100);

// Projectile linked list implementation
class ProjectileNode {
	constructor(projectile) {
		this.projectile = projectile;
		this.next = null;
	}
}

class ProjectileLinkedList {
	constructor() {
		this.head = null;
		this.tail = null;
		this.length = 0;
	}

// Add a new projectile to the end of the linked list
	add(projectile) {
		const newNode = new ProjectileNode(projectile);

if (!this.head) {
			this.head = newNode;
			this.tail = newNode;
		} else {
			this.tail.next = newNode;
			this.tail = newNode;
		}

this.length++;
	}

// Remove a projectile from the linked list
	remove(projectile) {
		let currentNode = this.head;
		let prevNode = null;

while (currentNode) {
			if (currentNode.projectile === projectile) {
				if (currentNode === this.head) {
					this.head = currentNode.next;
				} else if (currentNode === this.tail) {
					this.tail = prevNode;
					prevNode.next = null;
				} else {
					prevNode.next = currentNode.next;
				}

this.length--;
				break;
			}

prevNode = currentNode;
			currentNode = currentNode.next;
		}
	}

// Method to remove all projectiles from the linked list
	removeAll() {
		this.head = null;
		this.tail = null;
		this.length = 0;
	}

// Get the size of the linked list
	size() {
		return this.length;
	}

// Iterate through the linked list and call a callback function on each node
	forEach(callback) {
		let currentNode = this.head;

while (currentNode) {
			callback(currentNode.projectile);
			currentNode = currentNode.next;
		}
	}
}

// Bot class not editable by the Brain Makers
class Bot {
	constructor(x, y, brain) {
		// eachg bot needs a unique ID
		const getUUID = () => {
			let d = new Date().getTime();
			let uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
				/[xy]/g,
				function (c) {
					let r = (d + Math.random() * 16) % 16 | 0;
					d = Math.floor(d / 16);
					return (c == "x" ? r : (r & 0x3) | 0x8).toString(16);
				}
			);
			return uuid;
		};
		this.id = getUUID();
		this.x = x;
		this.y = y;
		this.r = 2;
		this.brain = brain;

// Add a property to track the decision counter
		this.decisionCounter = 0;

// Initial bullet count
		this.bulletCount = 10;

// check em before we assign
		this.checkPowerValues();

// Initial armor value (if 0, armor = 100)
		this.armor = (this.brain.armor || 0) * 25 + 100;
		// Initial bullet power
		this.bulletPower = this.brain.bulletPower || 0;
		// Initial scan radius
		this.scanRadius = (this.brain.scanDistance || 0) * 20;

// create svg elements
		this.botElement = this.createBotElement();
		this.shieldElement = this.createShieldElement();
		this.scanElement = this.createScanElement();
		this.bandolierElement = this.createBandolierElement();
		this.projectilesList = new ProjectileLinkedList();

// Create a closure to encapsulate the scan function
		const scan = () => {
			const enemyPositions = arena.bots
				.filter((bot) => bot !== this && this.isInScanRange(bot.x, bot.y))
				.map((bot) => ({ x: bot.x, y: bot.y }));
			if (enemyPositions.length > 0) {
				logMe(
					`${this.brain.name} scanned and found ${JSON.stringify(enemyPositions[0])}`
				);
			}

return enemyPositions;
		};

// Expose only the scan function to the Brain
		this.brain.scan = scan;

// Create a getter function for whereAmI
		const whereAmI = () => {
			return { x: this.x, y: this.y };
		};

// Add the whereAmI function to the existing brain object
		this.brain.whereAmI = whereAmI;
	}

// this will punish you if you tried to give your bot too many points
	checkPowerValues() {
		function hasPower(power) {
			if (!power) {
				return 0;
			}
			return power;
		}
		function inBounds(power) {
			if (power >= 6 || power <= -1) {
				return false;
			}
			return true;
		}
		if (
			hasPower(this.brain.armor) +
				hasPower(this.brain.bulletPower) +
				hasPower(this.brain.scanDistance) >=
				6 ||
			!inBounds()
		) {
			this.brain.armor = 0;
			this.brain.bulletPower = 0;
			this.brain.scanDistance = 0;
		}
	}

// create the circle that represents the bot
	createBotElement() {
		const botElement = document.createElementNS(
			"http://www.w3.org/2000/svg",
			"circle"
		);
		botElement.classList.add("bot");
		botElement.setAttribute("r", this.r);
		botElement.setAttribute("cx", this.x);
		botElement.setAttribute("cy", this.y);
		botElement.setAttribute("fill", this.brain.color); // Set the color of the bot circle
		botElement.setAttribute("data-name", this.brain.name);
		arenaSVG.appendChild(botElement);
		return botElement;
	}

// create the other circle that represents the shield element
	createShieldElement() {
		const shieldElement = document.createElementNS(
			"http://www.w3.org/2000/svg",
			"circle"
		);
		let circumference = 2 * Math.PI * (this.r + 1.7);
		shieldElement.classList.add("shield");
		shieldElement.setAttribute("r", this.r + 1.7);
		shieldElement.setAttribute("cx", this.x);
		shieldElement.setAttribute("cy", this.y);
		shieldElement.setAttribute("fill", "none");
		shieldElement.setAttribute("stroke", shieldColor);
		shieldElement.setAttribute("opacity", "0.7");
		shieldElement.setAttribute("stroke-width", `1.5`);
		shieldElement.setAttribute("stroke-dashoffset", -circumference / 4);
		shieldElement.setAttribute("stroke-linecap", `round`);
		shieldElement.setAttribute(
			"stroke-dasharray",
			`0 ${circumference / (this.armor / 25)}`
		);
		// botElement.setAttribute("data-name", this.brain.name);
		arenaSVG.appendChild(shieldElement);
		return shieldElement;
	}
	// create the other circle that represents the bandolier element
	createBandolierElement() {
		const bandElement = document.createElementNS(
			"http://www.w3.org/2000/svg",
			"circle"
		);
		let circumference = 2 * Math.PI * (this.r + 0.5);
		bandElement.classList.add("bandolier");
		bandElement.setAttribute("r", this.r + 0.5);
		bandElement.setAttribute("cx", this.x);
		bandElement.setAttribute("cy", this.y);
		bandElement.setAttribute("fill", "none");
		bandElement.setAttribute("stroke", bulletColor);
		bandElement.setAttribute("opacity", "0.8");
		bandElement.setAttribute("stroke-width", `1.1`);
		bandElement.setAttribute("stroke-dashoffset", circumference / 4);
		bandElement.setAttribute("stroke-linecap", `round`);
		bandElement.setAttribute(
			"stroke-dasharray",
			`0 ${circumference / this.bulletCount}`
		);
		// botElement.setAttribute("data-name", this.brain.name);
		arenaSVG.appendChild(bandElement);
		return bandElement;
	}

// create the other circle that represents the shield element
	createScanElement() {
		const scanElement = document.createElementNS(
			"http://www.w3.org/2000/svg",
			"circle"
		);
		let circumference = 2 * Math.PI * (this.brain.scanDistance * 20);
		scanElement.classList.add("scan");
		scanElement.setAttribute("r", this.brain.scanDistance * 20);
		scanElement.setAttribute("cx", this.x);
		scanElement.setAttribute("cy", this.y);
		scanElement.setAttribute("fill", "none"); // Set the color of the bot circle
		scanElement.setAttribute("stroke", "rgba(0,255,255,0.3)"); // Set the color of the bot circle
		scanElement.setAttribute("stroke-width", `0.1`);
		// botElement.setAttribute("data-name", this.brain.name);
		arenaSVG.appendChild(scanElement);
		return scanElement;
	}

// Function to check if a given point (x, y) falls within the scan radius of the bot
	isInScanRange(x, y) {
		const distance = Math.sqrt((x - this.x) ** 2 + (y - this.y) ** 2);
		return distance <= this.scanRadius;
	}

move() {
		// Increment the decision counter
		this.decisionCounter++;

// Implement decide() method in the Brain class
		const action = this.brain.decide();

// Check if the bot can fire based on the decision counter and remaining bullets
		if (this.decisionCounter % 5 == 0 && this.bulletCount <= 10) {
			this.bulletCount++;
		}

if (action == "shoot" && this.bulletCount <= 0) {
			return;
		}

// Update the bot's position based on the action (e.g., action = 'left', move left)
		switch (action) {
			case "left":
				this.x -= 1;
				break;
			case "right":
				this.x += 1;
				break;
			case "up":
				this.y -= 1;
				break;
			case "down":
				this.y += 1;
				break;
			case "shoot":
				this.shoot(this.brain.shotAngle);
				this.bulletCount--;
				break;
			// Add more cases for other actions as needed
		}

// Ensure the bot stays within the viewBox boundaries
		this.x = Math.max(0, Math.min(this.x, 100 - this.r));
		this.y = Math.max(0, Math.min(this.y, 100 - this.r));

// Update the position of the bot circle in the SVG
		this.botElement.setAttribute("cx", this.x);
		this.botElement.setAttribute("cy", this.y);
		this.shieldElement.setAttribute("cx", this.x);
		this.shieldElement.setAttribute("cy", this.y);
		this.bandolierElement.setAttribute("cx", this.x);
		this.bandolierElement.setAttribute("cy", this.y);
		this.scanElement.setAttribute("cx", this.x);
		this.scanElement.setAttribute("cy", this.y);
	}

// Function to handle taking damage
	gotHit(damage) {
		this.armor -= damage;
		logMe(`${this.brain.name} is at ${this.armor} health!`);
		if (this.armor <= 0) {
			// Bot destroyed, handle accordingly (e.g., remove from SVG)
			this.destroy();
		} else {
			// Change the bot's color when it gets hit
			this.botElement.setAttribute("fill", "yellow");
			this.botElement.setAttribute("stroke", "rgba(255,0,0,0.8)");
			this.botElement.setAttribute("stroke-width", 0.5);
			this.shieldElement.setAttribute(
				"stroke-dasharray",
				`0 ${(2 * Math.PI * (this.r + 1.7)) / (this.armor / 25)}`
			);
			// Reset the bot's color after a delay
			setTimeout(() => {
				this.botElement.setAttribute("fill", this.brain.color);
				this.botElement.setAttribute("stroke-width", 0);
			}, 200);
		}
	}

// random integer generator
	randInt(min, max) {
		return Math.floor(Math.random() * (max - min + 1)) + min;
	}

//Create a random number of circles
	explosion(
		circles = this.randInt(5, 9),
		x = this.x,
		y = this.y,
		minR = 7,
		maxR = 12,
		minDur = 600,
		maxDur = 2000
	) {
		for (let i = 0; i < circles; i++) {
			// create explosion
			const boomElement = document.createElementNS(
				"http://www.w3.org/2000/svg",
				"circle"
			);
			// animate r
			const boomElementAnimation = document.createElementNS(
				"http://www.w3.org/2000/svg",
				"animate"
			);
			// animate opacity
			const boomElementAnimation2 = document.createElementNS(
				"http://www.w3.org/2000/svg",
				"animate"
			);
			let dur = `${this.randInt(minDur, maxDur)}ms`;
			boomElement.setAttribute("r", 2);
			boomElement.setAttribute("cx", x + this.randInt(-10, 10) / 100);
			boomElement.setAttribute("cy", y + this.randInt(-10, 10) / -100);
			boomElement.setAttribute(
				"fill",
				`rgba(${this.randInt(155, 255)},${this.randInt(100, 155)},0,0.9)`
			);
			boomElementAnimation.setAttribute("attributeName", "r");
			boomElementAnimation.setAttribute(
				"values",
				`0; ${this.randInt(minR, maxR)}`
			);
			boomElementAnimation.setAttribute("dur", dur);
			boomElementAnimation.setAttribute("fill", "freeze");
			boomElementAnimation.setAttribute("begin", "indefinite");
			boomElementAnimation.setAttribute("repeatCount", "none");
			boomElementAnimation.setAttribute("keyTimes", "0;1");
			boomElementAnimation.setAttribute("keySplines", "0.70 0.10 0.05 0.85");
			boomElementAnimation.setAttribute("calcMode", "spline");
			boomElement.appendChild(boomElementAnimation);
			boomElementAnimation2.setAttribute("attributeName", "opacity");
			boomElementAnimation2.setAttribute("values", "0.5; 1; 0");
			boomElementAnimation2.setAttribute("dur", dur);
			boomElementAnimation2.setAttribute("fill", "freeze");
			boomElementAnimation2.setAttribute("begin", "indefinite");
			boomElementAnimation2.setAttribute("repeatCount", "none");
			boomElement.appendChild(boomElementAnimation2);
			// add it to the arena
			arenaSVG.appendChild(boomElement);
			// start animations
			boomElementAnimation.beginElement();
			boomElementAnimation2.beginElement();
			setTimeout(() => {
				boomElement.remove();
			}, maxDur);
		}
	}
	// Destroy this bot
	destroy() {
		// don't destroy both bots
		if (isGameRunning) {
			logMe(`${this.brain.name} destroyed!`);

// Remove the bot, shield, and scan elements from the DOM
			if (this.botElement.parentNode) {
				this.botElement.parentNode.removeChild(this.botElement);
				this.shieldElement.parentNode.removeChild(this.shieldElement);
				this.bandolierElement.parentNode.removeChild(this.bandolierElement);
				this.scanElement.parentNode.removeChild(this.scanElement);
				this.projectilesList.removeAll();
			}

// go boom
			this.explosion(this.randInt(4, 10));

// Update the `arena.bots` array to remove the destroyed bot
			const index = arena.bots.indexOf(this);
			if (index !== -1) {
				arena.bots.splice(index, 1);
			}

// Check if there's only one bot left (the winner)
			if (arena.bots.length === 1) {
				isGameRunning = false;
				// Display the name of the surviving bot as the winner
				const survivingBotName = arena.bots[0].brain.name;
				logMe(`Winner: ${survivingBotName}!`);
				arena.bots[0].projectilesList.removeAll();
				const winnerText = document.createElementNS(
					"http://www.w3.org/2000/svg",
					"text"
				);
				winnerText.setAttribute("font-family", `'Roboto', sans-serif`);
				winnerText.setAttribute("x", 50);
				winnerText.setAttribute("y", 38);
				winnerText.setAttribute("text-anchor", `middle`);
				winnerText.setAttribute("dominant-baseline", `middle`);
				winnerText.setAttribute("font-size", `8`);
				winnerText.setAttribute("font-weight", `900`);
				winnerText.setAttribute("fill", `goldenrod`);
				winnerText.textContent = `Winner:`;
				const winnerText2 = document.createElementNS(
					"http://www.w3.org/2000/svg",
					"text"
				);
				winnerText2.setAttribute("font-family", `'Roboto', sans-serif`);
				winnerText2.setAttribute("x", 50);
				winnerText2.setAttribute("y", 50);
				winnerText2.setAttribute("text-anchor", `middle`);
				winnerText2.setAttribute("dominant-baseline", `middle`);
				winnerText2.setAttribute("font-size", `15`);
				winnerText2.setAttribute("font-weight", `900`);
				winnerText2.setAttribute("fill", `gold`);
				winnerText2.textContent = `${survivingBotName}`;
				arenaSVG.appendChild(winnerText);
				arenaSVG.appendChild(winnerText2);
			}
		}
	}

// check if 2 objects are intersecting
	isIntersecting(obj1, obj2) {
		let sideA = Math.abs(obj1.y - obj2.y);
		let sideB = Math.abs(obj1.x - obj2.x);
		let distance = Math.sqrt(Math.pow(sideA, 2) + Math.pow(sideB, 2));

return distance <= obj1.r + obj2.r;
	}

// Function to shoot a projectile
	shoot(degree) {
		const projectileRadius = 1 + this.bulletPower / 10;
		// the speed is constant
		const projectileSpeed = 50 / (frameInterval * (this.bulletPower / 2 + 1));
		// the damage is 25 times whatever power level the brain gives it
		const damage = 25 * (this.bulletPower + 1);
		// the distance it travels gets divided by the bullet power given
		const maxTravelDistance = 141 / (this.bulletPower + 1);
		// Convert the degree value to radians
		const radians = (degree * Math.PI) / 180;

// Calculate the normalized direction vector
		const dx = Math.cos(radians);
		const dy = Math.sin(radians);

// Calculate the initial position of the projectile based on the bot's position
		let projectileX = this.x + dx * (this.r + projectileRadius);
		let projectileY = this.y + dy * (this.r + projectileRadius);

// animate bullets left
		this.bandolierElement.setAttribute(
			"stroke-dasharray",
			`0 ${(2 * Math.PI * (this.r + 0.5)) / this.bulletCount}`
		);

// Create the projectile circle element in the SVG
		const projectile = document.createElementNS(
			"http://www.w3.org/2000/svg",
			"circle"
		);
		projectile.setAttribute("class", "projectile");
		projectile.setAttribute("cx", projectileX);
		projectile.setAttribute("cy", projectileY);
		projectile.setAttribute("r", projectileRadius);
		projectile.setAttribute("fill", bulletColor); // Set the color of the projectile

// Create a new projectile and store it in the arena's projectiles array
		const projectileFired = {
			x: projectileX,
			y: projectileY,
			initX: projectileX,
			initY: projectileY,
			r: projectileRadius,
			damage: damage,
			id: this.id, // Store the bot that fired this projectile
			botName: this.brain.name, // Store the bot that fired this projectile
			projectileElement: projectile
		};

// Add the projectile to the linked list
		this.projectilesList.add(projectileFired);

// Add the projectile to the SVG
		arenaSVG.appendChild(projectile);

// determine if the projectile is still moving
		let stillMoving = true;

// Function to move the projectile in each frame
		function moveProjectile(timestamp) {
			// Update the position of the projectile in the direction for the set distance
			projectileX += dx * projectileSpeed;
			projectileY += dy * projectileSpeed;

// Update the position of the projectile in the SVG
			projectile.setAttribute("cx", projectileX);
			projectile.setAttribute("cy", projectileY);

// Update the position of the projectile in the stored projectile
			projectileFired.x = projectileX;
			projectileFired.y = projectileY;
			// reset the projectile to the one with updated x and y positions
			projectileFired.projectileElement = projectile;

// Check if the projectile traveled max distance
			const distanceTraveled = Math.sqrt(
				Math.pow(projectileX - projectileFired.initX, 2) +
					Math.pow(projectileY - projectileFired.initY, 2)
			);

if (
				// Check if the projectile traveled max distance
				distanceTraveled >= maxTravelDistance ||
				// Check if the projectile reached the edge of the arena
				projectileX <= -3 ||
				projectileX >= 103 ||
				projectileY <= -3 ||
				projectileY >= 103
			) {
				// Remove the projectile from the SVG

projectile.setAttribute("cx", 150);
				projectile.setAttribute("cy", 150);
				projectile.setAttribute("r", 0);
				projectile.remove();
				projectileFired.r = 0;
				projectileFired.x = 150;
				projectileFired.y = 150;
				stillMoving = false;
				return;
			}

// Check for collisions between projectiles of different bots
			if (stillMoving) {
				for (const bot of arena.bots) {
					if (bot.id !== projectileFired.id) {
						bot.projectilesList.forEach((enemyProjectile) => {
							const distanceToEnemyProjectile = Math.sqrt(
								Math.pow(projectileX - enemyProjectile.x, 2) +
									Math.pow(projectileY - enemyProjectile.y, 2)
							);

if (distanceToEnemyProjectile <= projectileRadius + enemyProjectile.r) {
								// Collision detected between projectiles
								// Remove both projectiles from the SVG and their linked lists
								enemyProjectile.projectileElement.remove();
								bot.projectilesList.remove(enemyProjectile);
								projectile.setAttribute("cx", 150);
								projectile.setAttribute("cy", 150);
								projectile.setAttribute("r", 0);
								projectile.remove();
								// Optionally, you can create an explosion effect at the collision point
								// For example:
								const explosionX = (projectileX + enemyProjectile.x) / 2;
								const explosionY = (projectileY + enemyProjectile.y) / 2;
								bot.explosion(1, projectileX, projectileY, 1, 2, 200, 500);
								stillMoving = false;
								return;
							}
						});
					}
					// Check for collisions between projectiles and different bots
					if (bot.id !== projectileFired.id) {
						const botX = bot.x;
						const botY = bot.y;
						const distanceToBot = Math.sqrt(
							Math.pow(projectileX - botX, 2) + Math.pow(projectileY - botY, 2)
						);

if (distanceToBot <= projectileRadius + bot.r) {
							// Collision detected
							projectileFired.projectileElement.remove();
							bot.projectilesList.remove(projectileFired);
							bot.gotHit(projectileFired.damage);
							logMe(`Direct hit on ${bot.brain.name}!`);
							return;
						}
					}
				}
			}

let lastTimestamp = 0;

if (!lastTimestamp) lastTimestamp = timestamp;
			const elapsedTime = timestamp - lastTimestamp;

// Check if enough time has elapsed to update the game
			if (elapsedTime >= frameInterval && stillMoving) {
				moveProjectile(timestamp);
				lastTimestamp = timestamp - (elapsedTime % frameInterval);
			}

requestAnimationFrame(moveProjectile);
		}

requestAnimationFrame(moveProjectile);
	}
}

class Chaos {
	constructor() {
		this.name = "Chaos";
		this.color = "orange";
		this.armor = 5;
		this.scanDistance = 0;
		this.bulletPower = 0;
		this.shotAngle = 0;
	}

// random integer generator
	randInt(min, max) {
		return Math.floor(Math.random() * (max - min + 1)) + min;
	}

// custom function to randomize the shots
	randomizeShots() {
		this.shotAngle = this.randInt(0, 360);
	}

decide() {
		const possibleMoves = ["left", "right", "up", "down", "shoot"];
		let mvmt = possibleMoves[this.randInt(0, 4)];
		this.randomizeShots();
		return mvmt;
	}
}

class CircleShot {
	constructor() {
		this.name = "Circle";
		this.color = "steelblue";
		this.armor = 2;
		this.scanDistance = 0;
		this.bulletPower = 3;

this.shotAngle = 0;
		this.initialAngle = 0;
	}

// random integer generator
	randInt(min, max) {
		return Math.floor(Math.random() * (max - min + 1)) + min;
	}

// custom function to randomize the shots
	randomizeShots() {
		this.initialAngle += 12;
		if (this.initialAngle >= 360) {
			this.initialAngle = 0;
		}
		this.shotAngle = this.initialAngle;
	}
	decide() {
		let mvmt = "shoot";
		this.randomizeShots();
		return mvmt;
	}
}

// Implement the Brain class to control the bot's actions
class Sniper {
	constructor() {
		this.name = "Sniper";
		this.color = "lightgreen";
		this.armor = 1;
		this.scanDistance = 4;
		this.bulletPower = 0;

this.decision = "shoot";
		this.shotAngle = 0;
		this.initialAngle = 0;
		this.movesLeft = 0;
		this.movesUp = 0;
		this.movesDown = 0;
	}

randInt(min, max) {
		return Math.floor(Math.random() * (max - min + 1)) + min;
	}

calculateAngle(x1, y1, x2, y2) {
		// Calculate the differences in x and y coordinates
		const dx = x2 - x1;
		const dy = y2 - y1;

// Convert the angle from radians to degrees
		let angleDegrees = (Math.atan2(dy, dx) * 180) / Math.PI;
		angleDegrees = angleDegrees % 360; // Convert negative angles to positive (0 to 360 degrees)

return angleDegrees;
	}

// shoot accurately yo
	takeTheShot() {
		let enemyPosition = this.scan();
		let myPosition = this.whereAmI();

if (enemyPosition.length > 0) {
			this.shotAngle = this.calculateAngle(
				myPosition.x,
				myPosition.y,
				enemyPosition[0].x,
				enemyPosition[0].y
			);
		} else {
			this.shotAngle = 0;
		}
	}

decide() {
		this.decision = "shoot";

this.takeTheShot();

if (this.movesLeft < 50) {
			this.movesLeft++;
			this.decision = "left";
		} else if (this.randInt(0, 1) == 1) {
			this.movesUp++;
			this.decision = "up";
			if (this.movesUp > 50) {
				this.movesDown++;
				this.decision = "down";
				if (this.movesDown > 50) {
					this.movesUp = 0;
					this.movesDown = 0;
					this.decision = "up";
				}
			}
		}

return this.decision;
	}
}

class Spiderman {
	constructor() {
		this.name = "Spiderman";
		this.color = "red";
		this.armor = 1;
		this.scanDistance = 1;
		this.bulletPower = 0;

this.decision = "shoot";
		this.shotAngle = 0;
		this.movesLeft = 0;
		this.movesUp = 0;
		this.movesDown = 0;
		this.multiplier = 1;
	}
	randInt(min, max) {
		return Math.floor(Math.random() * (max - min + 1)) + min;
	}
	decide() {
		this.decision = "shoot";
		if (this.movesLeft < 50) {
			this.movesLeft++;
			this.decision = "up";
		}
		this.shotAngle = this.shotAngle + 3 * this.multiplier;
		this.shotAngle %= 181;
		return this.decision;
	}
}

class CornerKiller {
	constructor() {
		this.name = "CornerKiller";
		this.color = "orange";
		this.armor = 1;
		this.scanDistance = 1;
		this.bulletPower = 0;

this.decision = "shoot";
		this.shotAngle = 0;

this.movesLeft = 0;
		this.movesUp = 0;
		this.movesDown = 0;
		this.multiplier = 1;
		this.toggle = true;
	}
	randInt(min, max) {
		return Math.floor(Math.random() * (max - min + 1)) + min;
	}
	decide() {
		// sun's out, guns out
		this.decision = "shoot";
		let me = this.whereAmI();
		// in bottom right corner
		if (me.x >= 50 && me.y >= 50) {
			if (this.toggle == true) {
				this.decision = "down";
			} else {
				this.decision = "right";
			}
			// top right corner
		} else if (me.x >= 50 && me.y < 50) {
			if (this.toggle == true) {
				this.decision = "up";
			} else {
				this.decision = "right";
			}
			// top left corner
		} else if (me.x < 50 && me.y < 50) {
			if (this.toggle == true) {
				this.decision = "up";
			} else {
				this.decision = "left";
			}
			// bottom left corner
		} else if (me.x < 50 && me.y >= 50) {
			if (this.toggle == true) {
				this.decision = "down";
			} else {
				this.decision = "left";
			}
		}
		//are we in the corner?
		// top left
		if (me.x <= 2 && me.y <= 2) {
			this.decision = "shoot";
			this.shotAngle = 45 + this.randInt(-45, 45);
			// bottom left
		} else if (me.x <= 2 && me.y >= 98) {
			this.decision = "shoot";
			this.shotAngle = -45 + this.randInt(-45, 45);
			// top right
		} else if (me.x >= 98 && me.y <= 2) {
			this.decision = "shoot";
			this.shotAngle = 125 + this.randInt(-45, 45);
			// bottom right
		} else if (me.x >= 98 && me.y >= 98) {
			this.decision = "shoot";
			this.shotAngle = -125 + this.randInt(-45, 45);
		}
		// change which decision is being made
		this.toggle = !this.toggle;
		return this.decision;
	}
}

// stored scope of all classes of competitors
const playersScope = {
	CircleShot,
	Chaos,
	CornerKiller,
	Sniper,
	Spiderman
};

// Game logic
let bot1;
let bot2;

// default bots
let queuedBot1;
let queuedBot2;

// Function to update the game at each frame interval (e.g., every 100ms)
function updateGame() {
	bot1.move();
	bot2.move();
}

// assigns brains and sets the starting positions of the bots
function setMatchup(brain1, brain2) {
	// random integer generator
	function randInt(min, max) {
		return Math.floor(Math.random() * (max - min + 1)) + min;
	}
	// minimum distance to be apart
	let d = 50;
	// check to see if they're too close together
	function distance(x1, y1, x2, y2) {
		return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
	}

let x1, y1, x2, y2;

do {
		// Generate random positions for bot 1
		x1 = randInt(10, 90);
		y1 = randInt(10, 90);

// Generate random positions for bot 2
		x2 = randInt(10, 90);
		y2 = randInt(10, 90);
	} while (distance(x1, y1, x2, y2) <= d);

bot1 = new Bot(x1, y1, brain1);
	bot2 = new Bot(x2, y2, brain2);
}

// function to allow buttons to change bots that will be fighting
function changeBot(whichBot = 1, botName = "Chaos") {
	let botSpan = document.querySelector(`.s${whichBot}`);
	let botInstance = setBot(botName);

if (botInstance && botInstance.color) {
		botSpan.style.background = botInstance.color;
	} else {
		console.error("Bot instance or color not found for:", botName);
	}
	let selectId = whichBot === 1 ? "bot-select-1" : "bot-select-2";
	let currentSelectedBot = document.getElementById(selectId).value;

// Update the value of the corresponding select element if the new bot name is different
	if (botName !== currentSelectedBot) {
		document.getElementById(selectId).value = botName;
	}
	switch (whichBot) {
		case 1:
			queuedBot1 = setBot(botName);
			bot1Name = botName;
			break;
		case 2:
			queuedBot2 = setBot(botName);
			bot2Name = botName;
			break;
	}
}

// CHEAT CHECKS
function checkForCheaters(bot) {
	function getClassCodeAsString(classInstance) {
		// Make sure the input is an object
		if (typeof classInstance !== "object" || classInstance === null) {
			throw new Error("Input must be an object.");
		}

// Get the constructor function of the instance
		const constructor = classInstance.constructor;

// Get the code of the constructor function as a string
		const constructorCode = constructor.toString();

// Use regular expressions to extract the class body from the constructor function code
		const classBodyMatch = constructorCode.match(/class\s+(\w+)\s*{([\s\S]*)}/);

if (!classBodyMatch) {
			throw new Error("Failed to extract the class body.");
		}

// Extract the class name and the class body
		const className = classBodyMatch[1];
		const classBody = classBodyMatch[2];

return `class ${className} {${classBody}}`;
	}

// Check for access to arena.bots or arena.projectiles within functions
	let brainString = getClassCodeAsString(bot.brain);
	if (
		brainString.includes("arena.bots") ||
		brainString.includes("arena.projectiles")
	) {
		console.error(
			`Cheating detected for Bot ${bot.brain.name}: Access to arena.bots or arena.projectiles within a function not allowed!`
		);
		return false;
	}
	return true;
}

// used to re-instantiate classes
let bot1Name = "CircleShot";
let bot2Name = "Sniper";

// set up the bots for the arena
function stageBots() {
	// reinstantiate the selected bot classes (resets all local vars)
	changeBot(1, bot1Name);
	changeBot(2, bot2Name);

// reassigns bot1 and bot2
	setMatchup(queuedBot1, queuedBot2);

// add the bots to be tracked in the arena
	arena.bots.push(bot1);
	arena.bots.push(bot2);

// Check for cheaters before starting the game
	const allBots = [bot1, bot2];
	const noCheaters = allBots.every(checkForCheaters);
	if (!noCheaters) {
		console.error("Game cannot start due to cheating!");
		return;
	}
}

// updates the game every frameInterval
function animateLoop() {
	let lastTimestamp = 0;
	let elapsedTime = 0;

// animation loop
	function animateGame(timestamp) {
		if (isGameRunning) {
			if (!lastTimestamp) lastTimestamp = timestamp;
			const elapsedTime = timestamp - lastTimestamp;

// Check if enough time has elapsed to update the game
			if (elapsedTime >= frameInterval) {
				updateGame();
				lastTimestamp = timestamp - (elapsedTime % frameInterval);
			}
			requestAnimationFrame(animateGame);
		}
	}

// Start the game loop
	requestAnimationFrame(animateGame);
}
//timeouts (to clear so we don't get multiple)
let t2, t1, tf, tGo;
function countDown() {
	function count(num) {
		const countDownText = document.createElementNS(
			"http://www.w3.org/2000/svg",
			"text"
		);
		countDownText.setAttribute("font-family", `'Roboto', sans-serif`);
		countDownText.setAttribute("x", 50);
		countDownText.setAttribute("y", 50);
		countDownText.setAttribute("text-anchor", `middle`);
		countDownText.setAttribute("dominant-baseline", `middle`);
		countDownText.setAttribute("font-size", `15`);
		countDownText.setAttribute("font-weight", `900`);
		countDownText.setAttribute("fill", `gold`);
		countDownText.textContent = num;
		const anim = document.createElementNS(
			"http://www.w3.org/2000/svg",
			"animate"
		);
		anim.setAttribute("attributeName", "opacity");
		anim.setAttribute("values", "1;0");
		anim.setAttribute("dur", 1);
		anim.setAttribute("fill", "freeze");
		anim.setAttribute("begin", "indefinite");
		anim.setAttribute("repeatCount", "none");
		anim.setAttribute("keyTimes", "0;1");
		anim.setAttribute("keySplines", "0.70 0.10 0.05 0.85");
		anim.setAttribute("calcMode", "spline");
		countDownText.appendChild(anim);
		arenaSVG.appendChild(countDownText);
		// start animations
		anim.beginElement();
		setTimeout(() => {
			countDownText.remove();
		}, 1000);
	}
	clearTimeout(t2);
	clearTimeout(t1);
	clearTimeout(tf);
	clearTimeout(tGo);
	count(3);
	t2 = setTimeout(() => {
		count(2);
	}, 1000);
	t1 = setTimeout(() => {
		count(1);
	}, 2000);
	tf = setTimeout(() => {
		count("FIGHT!");
	}, 3000);
	// start after the countdown
	tGo = setTimeout(() => {
		// toggle the running variable
		isGameRunning = true;

// begin the animation loop
		animateLoop();
	}, 3700);
}

// start it up!
function startGame() {
	// end the current game if there is one
	endGame();

// select and ready the bots for battle!
	stageBots();

// give the old bullets a chance to skidaddle off screen
	// since I can't friggin figure out how to clear em when we start a new game
	countDown();
}

// stop animating and end the game
function endGame() {
	isGameRunning = false;

// set the svg to just the background
	// TODO: still need to stop tracking the projectiles from the last game
	arenaSVG.innerHTML = gameBG;

clearProjectilesFromArena();

// reset arena
	arena = new Arena(100, 100);
}

// HELPERS

// menu stuff
function toggleRight() {
	const element = document.querySelector(".menuArea");
	element.classList.toggle("closed");
}

function changeBulletColor(col) {
	bulletColor = col;
}
function changeShieldColor(col) {
	shieldColor = col;
}

// import modal
const dialog1 = document.querySelectorAll("dialog")[1];

dialog1.addEventListener("click", (e) => {
	const dialogDimensions = dialog1.getBoundingClientRect();
	if (
		e.clientX < dialogDimensions.left ||
		e.clientX > dialogDimensions.right ||
		e.clientY < dialogDimensions.top ||
		e.clientY > dialogDimensions.bottom
	) {
		dialog1.close();
	}
});
document.querySelector("#import").addEventListener("click", () => {
	dialog1.showModal();
});

document.querySelectorAll(".closeDialog")[1].addEventListener("click", () => {
	dialog1.close();
});
// info modal
const dialog0 = document.querySelectorAll("dialog")[0];

dialog0.addEventListener("click", (e) => {
	const dialogDimensions = dialog0.getBoundingClientRect();
	if (
		e.clientX < dialogDimensions.left ||
		e.clientX > dialogDimensions.right ||
		e.clientY < dialogDimensions.top ||
		e.clientY > dialogDimensions.bottom
	) {
		dialog0.close();
	}
});
document.querySelector("#open").addEventListener("click", () => {
	dialog0.showModal();
});

document.querySelectorAll(".closeDialog")[0].addEventListener("click", () => {
	dialog0.close();
});

// prism css
// all pre tags on the page
const pres = document.getElementsByTagName("pre");

// reformat html of pre tags
if (pres !== null) {
	for (let i = 0; i < pres.length; i++) {
		if (window.CP.shouldStopExecution(0)) break;
		// check if its a pre tag with a prism class
		if (isPrismClass(pres[i])) {
			// insert code and copy element
			pres[
				i
			].innerHTML = `<code class="${pres[i].className}">${pres[i].innerHTML}</code>`;
		}
	}
	window.CP.exitedLoop(0);
}

// helper function
function isPrismClass(preTag) {
	return preTag.className.substring(0, 8) === "language";
}

// switcher for the brain
function setBot(brain) {
	// Check if the class exists in the global scope
	if (typeof playersScope[brain] === "function") {
		// Create an instance of the class if it exists
		return new playersScope[brain]();
	} else {
		// Handle the case where the class does not exist
		console.error("Class not found:", brain);
		return null;
	}
}

// Function to fetch the JavaScript file from the URL and add the class to playersScope
async function addClassFromUrl() {
	const urlInput = document.getElementById("urlInput").value;
	try {
		const module = await import(urlInput);
		console.log("Module loaded:", module);

const newClass = module.default; // Access the default export

if (newClass) {
			const className = newClass.name; // Retrieve the class name
			playersScope[className] = newClass;
			populateSelectOptions("bot-select-1");
			populateSelectOptions("bot-select-2");
			const newPlayer = document.createElement("span");
			newPlayer.classList.add("newPlayer");
			newPlayer.textContent = className;
			document.querySelector(".importedPlayers").appendChild(newPlayer);
			logMe(`Player "${className}" added!`);
		} else {
			console.error(`Class not found in ${urlInput}`);
		}
	} catch (error) {
		console.error("Error:", error);
	}
}

populateSelectOptions("bot-select-1");
populateSelectOptions("bot-select-2");

// default matchup
changeBot(1, "CircleShot");
changeBot(2, "Sniper");

// add btn listeners
document.querySelector('.endBtn').addEventListener('click', endGame);
document.querySelector('.startBtn').addEventListener('click', startGame);
document.querySelector('.rightPlayerBtn').addEventListener('click', toggleRight);

//CHANGE MEEEEE
class CustomBrain {
	constructor() {
		this.name = "Bojangles";
		this.color = "purple";

//**POWERS (must total < 5)**
		this.armor = 1;
		this.bulletPower = 0;
		this.scanDistance = 1;
		//***************************

// your logic below should change these 2 variables
		this.decision = "shoot";
		this.shotAngle = 0;

// you can add additional variables here if you want, but be sure not to overwrite any existing variables
	}

/* 
	these calls are available any time and do NOT take the place of a decision
	
	this.scan();
	will either return:
	1. an object with the enemy's x and y (if an enemy is within the scan radius)
	2. an empty object (if no enemy within the radius)
	
	this.whereAmI();
	will return your x and y in an object (ex: {x: 25, y: 61})
	*/
	// random integer generator
	randInt(min, max) {
		return Math.floor(Math.random() * (max - min + 1)) + min;
	}
	// the decide call gets made every time the game updates (e.g. every 100ms)
	decide() {
		if (this.randInt(0, 1) == 1) {
			this.shotAngle = 180;
		} else {
			this.shotAngle = 0;
		}
		// Your decision-making logic goes here (e.g., move left, shoot, etc.)
		return this.decision;
	}
}

Frontend Forever App